<template>
  <el-dialog
    width="1000px"
    :title="dataForm.id ? '编辑' : '添加'"
    :visible.sync="visible"
    :show-close="true"
  >
    <el-form
      ref="dataForm"
      v-loading="commonLoading"
      :model="dataForm"
      :rules="dataRule"
      size="small"
      label-position="right"
      label-width="100px"
      :element-loading-text="loadingText"
    >
      <el-form-item label="地区名称" prop="areaName">
        <el-input v-model="dataForm.areaName" placeholder="请输入地区名" />
      </el-form-item>
      <el-form-item label="地区英文名" prop="areaNameEn">
        <el-input
          v-model="dataForm.areaNameEn"
          placeholder="请输入地区英文名"
        />
      </el-form-item>
      <el-form-item label="排序" prop="seq">
        <el-input v-model="dataForm.seq" placeholder="请输入排序" />
      </el-form-item>
      <div class="submitBtn" @click="dataFormSubmit()">确认</div>
    </el-form>
  </el-dialog>
</template>

<script>
import { saveArea } from '@/api/area'
export default {
  data() {
    return {
      visible: false,
      commonLoading: false,
      loadingText: '数据正在提交...',
      dataForm: {
        id: '',
        areaName: '',
        areaNameEn: '',
        seq: 0
      },
      dataRule: {
        areaName: [
          { required: true, message: '请输入地区名称', trigger: 'blur' }
        ],
        areaNameEn: [
          { required: true, message: '请输入地区名称韩文', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(item) {
      this.dataForm.id = 0
      this.dataForm.areaName = ''
      this.dataForm.areaNameEn = ''
      this.dataForm.seq = ''
      if (item) {
        this.dataForm.id = item.id
        this.dataForm.seq = item.seq
        this.dataForm.areaName = item.areaName
        this.dataForm.areaNameEn = item.areaNameEn
      }
      this.visible = true
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loadingText = '数据正在提交...'
          this.commonLoading = true
          saveArea(this.dataForm)
            .then((response) => {
              if (response && response.code === 1) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.commonLoading = false
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.commonLoading = false
                this.$message.error(response.msg)
              }
            })
            .catch(() => {
              this.commonLoading = false
            })
        }
      })
    }
  }
}
</script>
<style>
.el-loading-mask {
  z-index: 999999999999999999 !important;
}

.avatar {
  width: 35px;
  height: 35px;
  display: block;
}
</style>
<style lang="scss" scoped>
.uploaderList {
  padding: 0;
  margin: 0;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 80px;
    height: 32px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    img {
      max-width: 148px;
      max-height: 148px;
    }
    .BtnBox {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center;
      font-size: 15px;
      display: none;
    }
  }
}
.uploaderList li:hover .BtnBox {
  display: inline-block;
}
</style>
<style lang="scss" scoped>
.el-dialog__wrapper .el-dialog .el-dialog__body {
  padding: 0 60px 30px;
}
.dialog-title {
  display: flex;
  height: 50px;
  align-items: center;
  margin-bottom: 20px;
  .title {
    flex: 1;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
  }
  .closeBtn {
    width: 30px;
    height: 30px;
  }
}

.leftContent {
  flex: 1;
  .tips {
    line-height: 40px;
  }
}
.submitBtn {
  width: 320px;
  height: 40px;
  cursor: pointer;
  background: #2884ec;
  border-radius: 20px;
  font-size: 18px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  margin: 30px auto 10px;
}
</style>
